<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { defineComponent } from "vue";

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
]);

import { countBlogsByMonth } from "@/api/blog";
export default defineComponent({
  name: "BlogBar",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "white",
  },
  data() {
    return {
      total: [],
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "博客篇数",
            min: 0,
            max: 60,
            interval: 10,
            axisLabel: {
              formatter: "{value} 篇",
            },
          },
        ],
        series: [
          {
            name: "博客",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 篇";
              },
            },
            data: [],
          },
        ],
      },
    };
  },

  watch: {
    total: {
      handler(newVal) {
        this.option.series = [
          {
            name: "博客",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 篇";
              },
            },
            data: newVal,
          },
        ];
      },
    },
  },

  mounted() {
    this.countTotal();
  },

  methods: {
    countTotal() {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      countBlogsByMonth(userInfo.id).then((res) => {
        if (res.code == 200) {
          this.total = res.data;
        }
      });
    },
  },
});
</script>
<style lang="less" scoped>
.chart {
  height: 80vh;
}
</style>
